<template>
	<div>
		<Input placeholder="请输入课程分类名称" />
		<Tree :data="temp" children-key="subs" :render="renderContent" class="demo-tree-render"></Tree>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				temp: [{
					akclxid: 'temp',
					lxname: '分类',
					expand: true,
					selected: true,
					checked: true,
					render: (h, {
						root,
						node,
						data
					}) => {
						return h('span', {
							style: {
								display: 'flex',
								width: '100%',
								justifyContent: "space-between",
								paddingRight: "30px"
								
							}
						}, [
							h('span', [
								h('Icon', {
									props: {
										type: 'ios-folder-outline'
									},
									style: {
										marginRight: '8px',
										
									}
								}),
								data.akclxid ? h('span', data.lxname) : h('span', [
									h('Input', {
										props: Object.assign({}, {
											value: data.lxname,
											placeholder: "请输入分类名称",
										}),
										style: {
											width: '30%',
											marginRight: '10px'
										},
										on: {
											input: e => {
												data.lxname = e;
											}
										}
										
									}),
									h('Button', {
										props: Object.assign({}, {
											type: 'success',
											size: "small"
										}),
										on: {
											click: () => {
												this.saveNewLx(root, node, data);
											}
										},
									}, "保存"),
								]),
							]),
							h('span', {
								style: {
									
								}
							}, [
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										icon: 'ios-add',
										type: 'primary'
									}),
									style: {
										
									},
									on: {
										click: () => {
											this.addNew(data);
										}
									}
								})
							])
						]);
					},
					subs: []
				}],
				buttonProps: {
					type: 'default',
					size: 'small',
				},
			}
		},
		methods: {
			init: function() {
				this.search();
			},
			addNew: function(data) {
				if (data.subs) {
					
				} else {
					data.subs = [];
				}
				data.subs.push({
					akclxid: "",
					lxname: '',
					subs: [],
					expand: true
				});
			},
			saveNewLx: function(root, node, kclx) {
				
				const parentKey = root.find(el => el === node).parent;
				const parent = root.find(el => el.nodeKey === parentKey).node;
				kclx.pid = parent.akclxid;
				this.http.post({
					url: "/kc/kclx/info",
					data: {
						akechenglx: kclx
					}
				}).then(data => {
					this.message.info("添加成功");
					this.$forceUpdate();
				});
			},
			remove: function(root, node, data) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除场馆，确定吗？",
					onOk: () => {
						
						const parentKey = root.find(el => el === node).parent;
						const parent = root.find(el => el.nodeKey === parentKey).node;
						
						const index = parent.subs.indexOf(data);

						this.http.delete({
							url: "/kc/kclx/info",
							param: {
								kclxid: data.akclxid
							}
						}).then(data => {
							parent.subs.splice(index, 1);
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/kc/kclx/tree",
				}).then(data => {
					this.temp[0].subs = data.akechenglxs;
					// this.treeData = this.common.deepClone(this.temp);
					// console.log(this.treeData);
				});
			},
			renderContent: function(h, {
				root,
				node,
				data
			}) {
				return h('span', {
					style: {
						display: 'flex',
						width: '100%',
						justifyContent: "space-between",
						paddingRight: "30px"
					}
				}, [
					h('span', [
						h('Icon', {
							props: {
								type: 'ios-paper-outline'
							},
							style: {
								marginRight: '8px'
							}
						}),
						data.akclxid ? h('span', data.lxname) : h('span', [
							h('Input', {
								props: Object.assign({}, {
									value: data.lxname,
									placeholder: "请输入分类名称"
								}),
								style: {
									width: '50%',
									marginRight: '10px'
								},
								on: {
									input: e => {
										data.lxname = e;
									}
								}
							}),
							h('Button', {
								props: Object.assign({}, {
									type: 'success',
									size: 'small'
								}),
								on: {
									click: () => {
										this.saveNewLx(root, node, data);
									}
								},
							}, "保存"),
						]),
					]),
					h('span', {
						style: {
							display: 'inline-block',
						}
					}, [
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-add'
							}),
							style: {
								marginRight: '8px'
							},
							on: {
								click: () => {
									this.addNew(data);
								}
							}
						}),
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-remove'
							}),
							on: {
								click: () => {
									this.remove(root, node, data)
								}
							}
						})
					])
				]);
			},

		},
		created: function() {
			this.init();
		}
	}
</script>

<style>
	.demo-tree-render .ivu-tree-title {
		width: 100%;
	}
</style>